<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popconfirm</title>
      <!-- 文档公共样式 及组件特有示例样式-->
    <link rel="stylesheet"  href="../../docs.css" />
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
</head>
<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Popconfirm</h1>
      <p class="tdesign-demo-wrap__info">开发者：erachen</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-5-27</p>
      <p class="tdesign-demo-wrap__info">说明：tdesign Popconfirm组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">默认</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->

        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>
            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <div class="t-popconfirm__inner">基础气泡确认框文案示意文字按钮</div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>
          </div>
        </div>
          <!-- 内容区 End-->
      </div>
    </div>

    <!-- 组件状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">类型</h2>

          <!-- 内容区 Start-->

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">1.带图标的 popcomfirm：</h2>
        <!-- 内容区 Start-->

        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>

            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <i class="t-message__icon t-icon t-icon-loading"></i>
                <div class="t-popconfirm__inner">事件通知类型偏向于提示</div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>

          </div>
        </div>
        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>
            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <i class="t-message__icon t-icon t-icon-loading"></i>
                <div class="t-popconfirm__inner">事件通知类型偏向于警示</div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>
            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <i class="t-message__icon t-icon t-icon-loading"></i>
                <div class="t-popconfirm__inner">事件通知类型偏向于警告</div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">2.自定义 popcomfirm：</h2>

        <!-- 内容区 Start-->

        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>
            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <div class="t-popconfirm__inner">
                  <strong>基础气泡确认框文案示意文字按钮</strong>
                  <div>带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述</div>
                </div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>
            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <i class="t-message__icon t-icon t-icon-loading"></i>
                <div class="t-popconfirm__inner">
                  <strong>基础气泡确认框文案示意文字按钮</strong>
                  <div>带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述</div>
                </div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件尺寸 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">组件大小</h2>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">1. 事件通知类型偏向于提示宽度144px</h2>

        <!-- 内容区 Start-->

        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>
            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <i class="t-message__icon t-icon t-icon-loading"></i>
                <div class="t-popconfirm__inner"> 最小</div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>
          </div>
        </div>

        <h3 class="tdesign-demo-item--message__body__title">2.最大宽度不做限制，建议360px：</h2>

        <div class="tdesign-demo-block">
          <div class="t-popconfirm t-popconfirm--position-bottom-right">
            <div class="t-popconfirm__arrow"></div>
            <div class="t-popconfirm__content">
              <div class="t-popconfirm__body">
                <i class="t-message__icon t-icon t-icon-loading"></i>
                <div class="t-popconfirm__inner">
                  <strong>基础气泡确认框文案示意文字按钮</strong>
                  <div>带描述的气泡确认框在主要说明文字之外增加了操作相关的详细描述</div>
                </div>
              </div>
              <div class="t-popconfirm__buttons">
                <button class="t-button t-size-s t-button--line">取消</button>
                <button class="t-button t-size-s t-button--primary">确认删除</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 内容区 End-->
    </div>

  </div>

</body>
</html>
